var tpl = require('../../views/home/page');
var highcharts = require('highcharts');

return {
    template:tpl,
    path:'/home/',
    entry:true,
    events:{
        'click .login':'login',
    },
    onInit:function(){
        /**
         * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
        **/
        var chart = new highcharts.Chart('sale', {
            title: {
                text: null
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: false,
                lineWidth: 0
            },
            credits:{
                enabled:false // 禁用版权信息
            },
            xAxis: {
                tickLength:0,
                categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            legend: {
                enabled:false
            },
            series: [{
                name: '销售额',
                data: [50005, 65665, 92544, 86890, 139822, 159980, 202254, 269622, 270000, 300542, 280065, 405211]
            }]
        });




        $('#rate').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: null,
                align: 'center'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.money}</b>'
            },
            credits:{
                enabled:false // 禁用版权信息
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false
                        
                    },
                    startAngle: -90,
                    endAngle: 270,
                    center: ['50%', '50%'],
                    showInLegend:true,
                    point: {
                        events: {
                            legendItemClick: function(e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    }
                }
                
            },
            series:[{
                type: 'pie',
                name: '本年销售趋势',
                innerSize: '70%',
                data: [
                    {
                        name:'总收入',
                        money:'￥27,221,350',
                        y:50
                    },
                    {
                        name:'总成本',
                        money:'￥13,000,350',
                        y:25
                    },
                    {
                        name:'总费用',
                        money:'￥13,000,350',
                        y:25
                    }
                ]
            }],
            legend: {
                enabled: true,
                useHTML:true,
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                floating: false,
                align: 'right',
                verticalAlign: 'top',
                symbolHeight:20,
                symbolRadius:0,
                itemMarginBottom:5,
                x: 0,
                y: 40,
                labelFormat: '<span style="font-size: 13px; color: #323232;font-weight: 600;">{money}</span><br /><span style="font-size: 13px;color: #646464;font-weight: 100;">{name}</span>'
            },
        });







        
        $('#accountBalance').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: null
            },
            xAxis: {
                labels:false,
                tickLength:0,
                lineWidth: 0,
                categories: ['应收账款', '其他应收账款', '应付账款'],
                title: {
                    text: null
                }
            },
            yAxis: {
                labels:false,
                lineWidth: 0,
                labels: false,
                alignTicks:false,
                gridLineWidth:0,
                title: {
                    text: null
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        allowOverlap: true,
                        borderWidth:50,
                        formatter : function() {
                            return "<span style='font-size: 13px; color: #323232;font-weight: 600;'>"+this.point.money+"</span><br/><span>"+this.series.name+"</span>";
                        }
                    }
                }
            },
            legend: {
                enabled:false,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((highcharts.theme && highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>往来科目余额</b><br/>' +
                        this.series.name + ':' + this.point.money
                }
            },
            series: [{
                name:'应收账款',
                
                data:[{
                    money:'￥100，000，000',
                    y:100000000
                }]
            },
            {
                name:'其他应收账款',
                data: [{
                    money:'￥52，442，700',
                    y:52442700
                }]
            },{
                
                name:'应付账款',
                data: [{
                    money:'￥1，452，700',
                    y:5501660
                }]
            }]
        });











        $('#cost').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: null,
                align: 'center'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.money}</b>'
            },
            credits:{
                enabled:false // 禁用版权信息
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false
                    },
                    startAngle: -90,
                    endAngle: 270,
                    center: ['50%', '50%'],
                    showInLegend:true,
                    point: {
                        events: {
                            legendItemClick: function(e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    }
                }
                
            },
            series:[{
                type: 'pie',
                name: '费用',
                innerSize: '70%',
                data: [
                    {
                        name:'销售费用',
                        money:'￥27,221,350',
                        y:50
                    },
                    {
                        name:'管理费用',
                        money:'￥13,000,350',
                        y:25
                    },
                    {
                        name:'财务费用',
                        money:'￥13,000,350',
                        y:25
                    }
                ]
            }],
            legend: {
                enabled: true,
                useHTML:true,
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                floating: false,
                align: 'right',
                verticalAlign: 'top',
                symbolHeight:20,
                symbolRadius:0,
                itemMarginBottom:5,
                x: 0,
                y: 40,
                labelFormat: '<span style="font-size: 13px; color: #323232;font-weight: 600;">{money}</span><br /><span style="font-size: 13px;color: #646464;font-weight: 100;">{name}</span>'
            },
        });



        $('#totalCost').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: null
            },
            credits:{
                enabled:false // 禁用版权信息
            },
            xAxis: {
                labels:false,
                tickLength:0,
                lineWidth: 0,
                categories: ['费用'],
                title: {
                    text: null
                }
            },
            yAxis: {
                labels:false,
                lineWidth: 0,
                labels: false,
                alignTicks:false,
                gridLineWidth:0,
                title: {
                    text: null
                }
            },
            legend: {
                enabled: true,
                useHTML:true,
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                floating: false,
                align: 'right',
                verticalAlign: 'top',
                symbolHeight:20,
                symbolRadius:0,
                itemMarginBottom:5,
                x: 0,
                y: 40,
                labelFormat: '<span style="font-size: 13px; color: #323232;font-weight: 600;">{name.money}</span><br /><span style="font-size: 13px;color: #646464;font-weight: 100;">{name.name}</span>'
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name.name + ': ' + this.series.name.money + '<br/>'
                }
            },
            plotOptions: {
                series: {
                    events: {
                        legendItemClick: function(e) {
                            return false; // 直接 return false 即可禁用图例点击事件
                        }
                    }
                },
                column: {
                    stacking: 'percent',
                }
            },
            series: [{
                name: {
                    name:'主营业务成本',
                    money:'￥27,221,350'
                },
                data: [6]
            }, {
                name: {
                    name:'其他业务成本',
                    money:'￥13,000,350'
                },
                data: [3]
            }, {
                name: {
                    name:'营业外支出',
                    money:'￥13,000,350'
                },
                data: [1]
            }]
        });
        
    },
    login:function(){

    },
}